<template>
<!--选择员工界面-->
<el-carousel ref="carousel" :interval="6000000" arrow="always" trigger="click" height="210px" indicator-position="outside" v-if="staffPageData.length>0 && visible">
    <el-carousel-item v-for="(pageItem,pageIndex) in staffPageData">
        <div class="staff">
            <div v-for="(item,index) in pageItem" @click="selectStaff(item,(pageIndex*staffPageSize+index))" class="defaultBg" :class="{currentBg:currentSelectItem==(pageIndex*staffPageSize+index)}">
                <span class="iconfont icon-denglu" v-if="showIcon">
                    {{item.realName}}
                </span>
                <span v-else>
                    {{item.realName}}
                </span>
            </div>
        </div>
    </el-carousel-item>
</el-carousel>
</template>

<script>
import {
    getShopStaffs
} from '../api/api';
import jwt_decode from 'jwt-decode';

export default {
    props: {
        allowNoChoice: {
            type: Boolean,
            default: false
        },
        showIcon: {
            type: Boolean,
            default: true
        },
        checkAuth: {
            type: Boolean,
            default: false
        },
        clickEvent: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            visible: true,
            currentSelectItem: -1,
            staffPageSize: 12,
            staffPageData: []
        }
    },
    mounted() {
        if (sessionStorage.getItem('userToken') != null) {
            var userToken = jwt_decode(sessionStorage.getItem("userToken"));
            var roleid = userToken.roleId;
            if (this.checkAuth == true) {
                if (roleid == 2 || roleid == 3) {
                    this.visible = true;
                } else {
                    this.visible = false;
                }
            }
        }
        this.getShopStaffsEvent();
    },
    methods: {
        selectStaff(user, index) {
            if (user.id === "") {
                return;
            }
            if (this.clickEvent == true) {
                if (this.allowNoChoice == true) {
                    if (this.currentSelectItem == index) {
                        this.currentSelectItem = -1;
                        //user.id = '';
                        user.selected=false;
                        this.$emit("click", user);
                        return;
                    }
                }
                this.currentSelectItem = index;
                user.selected=true;
            }
            this.$emit("click", user);
        },
        invokeStaff(userId) {
            //TODO:如果在第二页则需要翻页到第二页
            //根据userId找到对应的员工，触发点击事件
            for (var pageIndex = 0; pageIndex < this.staffPageData.length; pageIndex++) {
                var pageItem = this.staffPageData[pageIndex];
                for (var index = 0; index < pageItem.length; index++) {
                    var item = pageItem[index];
                    if (item.id == userId) {
                        //主要找到this.currentSelectItem，并设置即可。
                        this.currentSelectItem = pageIndex * this.staffPageSize + index;
                        this.$refs.carousel.setActiveItem(pageIndex);
                        return;
                    }
                }
            }
        },
        getShopStaffsEvent() {
            getShopStaffs().then(res => {
                let {
                    msg,
                    code
                } = res;
                if (code !== "0") {
                    this.$message({
                        message: msg,
                        type: 'error'
                    });
                } else {
                    var staffs = res.data;
                    var staffPageTotal = Math.ceil(staffs.length / this.staffPageSize);
                    var showStaffNum = staffPageTotal * this.staffPageSize;
                    var fillEmptyStaffNum = showStaffNum - staffs.length;
                    for (var j = 0; j < fillEmptyStaffNum; j++) {
                        staffs.push({
                            "id": "",
                            "realName": ""
                        });
                    }
                    this.staffPageData = [];
                    this.currentSelectItem = -1;
                    for (var m = 0; m < staffPageTotal; m++) {
                        this.staffPageData.push(staffs.slice(this.staffPageSize * m, this.staffPageSize * (m + 1)));
                    }
                }
            });
        }
    }
}
</script>

<style scoped>
.staff {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-content: Center;
    align-items: Center;
    cursor: pointer;
    color: #ffffff;
    grid-gap: 5px;
    height: 100%;
}

.staff div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 96%;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    border: 1px solid #ffffff;
}

.defaultBg {
    background: #409EFF;
}

.currentBg {
    background: #FF768C;
}
</style>
